<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            position: relative;
            overflow: hidden;
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        <div
            style="position: absolute;border-radius: 50%;width: 50px;height: 50px;top: 50px;left: 50px;background-color: #ccc;">
        </div>
    </div>


    <script>
        //随机气泡1
        // var color = ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"]

        // function Bubble(color) {
        //     this.width = Math.floor(Math.random() * 141) + 10;
        //     // this.height = Math.floor(Math.random() * 141) + 10;
        //     this.left = Math.floor(Math.random() * 601);
        //     this.top = Math.floor(Math.random() * 601);
        //     var n = Math.floor(Math.random() * color.length);
        //     this.color = color[n];
        // }
        // var str = '';
        // Bubble.prototype.CreatBubble = function () {

        //     str += '<div style="position: absolute;border-radius: 50%;width:' + this.width + 'px; height:' + this.width + 'px; top:' + this.top + 'px; left:' + this.left + 'px; background-color:' + this.color + ';"></div>'
        //     return str;
        // }


        // var box = document.querySelector('.box');
        // var bubbles = {};
        // for (var i = 0; i < 40; i++) {
        //     // console.log(i);
        //     bubbles[i] = new Bubble(color);
        //     box.innerHTML = bubbles[i].CreatBubble();
        // }
        // console.log(bubbles);




        //随机气泡2
        /* 每个球都是一个对象 */
        /* 每个对象有 尺寸、背景色、位置（绝对定位，left top） */
        // function Ball(size, left, top, bgcolors) {
        function Bubble(size, left, top) {
            this.size = size || [10, 80];
            this.left = left || [0, 520];
            this.top = top || [0, 320];
        }

        // 根据球的尺寸生成具体的 html 结构
        Bubble.prototype.createBubble = function () {
            var size = this.getRand(this.size[0], this.size[1]),
                left = this.getRand(this.left[0], this.left[1]),
                top = this.getRand(this.top[0], this.top[1]),
                bgcolor = this.getBgColor();

            str = '<div style="position: absolute;border-radius: 50%;width:' + size + 'px; height:' + size + 'px; top:' + top + 'px; left:' + left + 'px; background-color:' + bgcolor + ';"></div>'
            return str;
        }

        // 返回随机的颜色值
        Bubble.prototype.getBgColor = function () {
            var bgcolors = ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"];
            return bgcolors[this.getRand(0, bgcolors.length - 1)];
        }

        /* 实现数值的随机 */
        Bubble.prototype.getRand = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        var str = '';
        for (let i = 1; i <= 50; i++) {
            // var bubbles = new Ball();
            str += new Bubble().createBubble();
        }
        var box = document.querySelector('.box');
        box.innerHTML = str;
    </script>
</body>

</html>